import '@/assets/styles/main.less';
import React, { useRef, useState } from 'react';
import Scrollbar from 'react-smooth-scrollbar';
import ReactWOW from 'react-wow';

export default function Layouts(props: any) {
  const [scroll, setscroll] = useState({ x: 0, y: 0 });
  const contentStyle = {
    height: '70vh',
    color: '#fff',
    textAlign: 'center',
    overflow: 'hidden',
    position: 'relative',
  };

  return (
    <div>
      <ReactWOW animation="slideInDown">
        <div
          className="menubox"
          style={{ background: `rgba(0, 0, 0,${scroll.y / 500})` }}
        >
          <div className="container spacebt">
            <div className="logo">
              <img
                src={require('@/assets/images/logo_com.png')}
                style={{
                  height: (128 - scroll.y) / 2 < 38 ? 38 : (128 - scroll.y) / 2,
                  top: 12 - scroll.y < 0 ? 0 : 12 - scroll.y,
                }}
                alt=""
              />
            </div>
            <ul className="menu">
              <li
                className="active"
                style={{
                  color: `rgba(255,255,255,${
                    1 - scroll.y / 500 < 0.5 ? 0.5 : 1 - scroll.y / 500
                  })`,
                }}
              >
                首页
              </li>
              <li
                style={{
                  color: `rgba(255,255,255,${
                    1 - scroll.y / 500 < 0.5 ? 0.5 : 1 - scroll.y / 500
                  })`,
                }}
              >
                发展历程
              </li>
              <li
                style={{
                  color: `rgba(255,255,255,${
                    1 - scroll.y / 500 < 0.5 ? 0.5 : 1 - scroll.y / 500
                  })`,
                }}
              >
                项目与服务
              </li>
              <li
                style={{
                  color: `rgba(255,255,255,${
                    1 - scroll.y / 500 < 0.5 ? 0.5 : 1 - scroll.y / 500
                  })`,
                }}
              >
                联系我们
              </li>
            </ul>
          </div>
        </div>
      </ReactWOW>
      <Scrollbar
        style={{ height: '100vh', overflow: 'auto' }}
        damping={0.08}
        onScroll={(e: any) => {
          setscroll(e.offset);
        }}
      >
        {React.cloneElement(props?.children, { scroll })}

        <div
          className="footer img"
          style={{
            backgroundImage: `url(${require('@/assets/images/footer.png')})`,
            backgroundPositionX: 'center',
            backgroundPositionY: (scroll.y - 2500) / 2,
          }}
        >
          <div style={{ padding: '12px 12px 0 12px' }}>
            <div className="container">
              <img
                src={require('@/assets/images/logo_com.png')}
                style={{ height: 38, marginTop: 24 }}
                alt=""
              />
              <div className="spacebt">
                <dl>
                  <dt>公司地址</dt>
                  <dd>南京市江宁区苏源大道19号B5栋1楼</dd>
                  <dt>联系电话</dt>
                  <dd>025-86111901</dd>
                  <dt>电子邮箱</dt>
                  <dd>center@jsnangao.com</dd>
                </dl>

                <dl>
                  <dt>友情链接</dt>
                  <dd>链接1</dd>
                  <dd>链接1</dd>
                  <dd>链接1</dd>
                  <dd>链接1</dd>
                </dl>
              </div>
            </div>
          </div>

          <div
            className="copyright"
            style={{
              backgroundImage: `url(${require('@/assets/images/footer.png')})`,
            }}
          >
            Copyright © 2017 江苏南高智能装备创新中心有限公司 版权所有 备案号:
            苏ICP备18015471号
          </div>
        </div>
      </Scrollbar>
    </div>
  );
}
